<template>
  <a-card id="userInfoPage" :bordered="false">
    <div class="card-header">
      <h2>个人信息中心</h2>
      <div v-if="!isEditing">
        <a-button type="primary" @click="enterEditMode">编辑信息</a-button>
      </div>
      <div v-else>
        <a-space>
          <a-button type="primary" @click="handleSave">保存修改</a-button>
          <a-button @click="exitEditMode">取消编辑</a-button>
        </a-space>
      </div>
    </div>

    <a-row :gutter="24">
      <!-- 头像展示列 -->
      <a-col :span="8">
        <div class="avatar-section">
          <a-image
              v-if="!isEditing"
              :src="userData.userAvatar"
              :width="240"
              class="avatar-image"
          />
          <a-input
              v-else
              v-model:value="editableData.userAvatar"
              placeholder="请输入头像URL"
              class="avatar-input"
          />
          <div class="avatar-tip" v-if="isEditing">仅支持输入图片URL地址</div>
        </div>
      </a-col>
      <!-- 用户信息列 -->
      <a-col :span="16">
        <a-descriptions bordered :column="1">
          <a-descriptions-item label="用户ID">
            {{ userData.id }}
          </a-descriptions-item>
          <a-descriptions-item label="用户账号">
            {{ userData.userAccount }}
          </a-descriptions-item>
          <a-descriptions-item label="用户角色">
            <a-tag :color="userData.userRole === 'admin' ? 'green' : 'blue'">
              {{ userData.userRole === 'admin' ? '管理员' : '普通用户' }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="用户名">
            <span v-if="!isEditing">{{ userData.userName }}</span>
            <a-input v-else v-model:value="editableData.userName" />
          </a-descriptions-item>
          <a-descriptions-item label="个人简介">
            <div v-if="!isEditing" class="profile-content">
              {{ userData.userProfile || '这个人很懒，什么都没写' }}
            </div>
            <a-textarea
                v-else
                v-model:value="editableData.userProfile"
                :rows="3"
                placeholder="请输入个人简介"
            />
          </a-descriptions-item>
        </a-descriptions>
      </a-col>
    </a-row>
  </a-card>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import {getLoginUserUsingGet, updateUserUsingPost} from '@/api/userController';

// 用户数据状态
const userData = reactive<API.UserVO>({
  id: '',
  userAccount: '',
  userName: '',
  userAvatar: '',
  userProfile: '',
  userRole: 'user',
});

// 编辑相关状态
const isEditing = ref(false);
const editableData = reactive<API.UserUpdateRequest>({});

// 进入编辑模式
const enterEditMode = () => {
  Object.assign(editableData, {
    id: userData.id,
    userName: userData.userName,
    userAvatar: userData.userAvatar,
    userProfile: userData.userProfile,
  });
  isEditing.value = true;
};

// 退出编辑模式
const exitEditMode = () => {
  isEditing.value = false;
};

// 保存修改
const handleSave = async () => {
  try {
    const res = await updateUserUsingPost(editableData);
    if (res.data.code === 0) {
      Object.assign(userData, editableData);
      message.success('个人信息更新成功');
      isEditing.value = false;
    } else {
      message.error('更新失败: ' + res.data.message);
    }
  } catch (error) {
    message.error('请求错误: ' + error);
  }
};

// 加载用户数据
const loadUserData = async () => {
  try {
    const res = await getLoginUserUsingGet();
    if (res.data.code === 0 && res.data.data) {
      Object.assign(userData, res.data.data);
    }
  } catch (error) {
    message.error('加载用户信息失败');
  }
};

// 生命周期钩子
onMounted(() => {
  loadUserData();
});
</script>

<style scoped>
.user-info-card {
  max-width: 1200px;
  margin: 24px auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.avatar-section {
  text-align: center;
  padding: 16px;
}

.avatar-image {
  border-radius: 8px;
  margin-bottom: 12px;
}

.avatar-input {
  margin: 16px 0;
}

.avatar-tip {
  color: #999;
  font-size: 12px;
}

.profile-content {
  white-space: pre-wrap;
  word-break: break-word;
}

:deep(.ant-descriptions-item-label) {
  width: 120px;
  font-weight: 500;
}
</style>
